/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-03 17:01:55
 * @LastEditTime : 2023-08-27 14:39:57
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Other\province.jsx
 * @Description  :
 */
import { HomeTop, HomeLeft, HomeRight } from '../Template'
import { AllProvince } from '../Data'
import { TemplateMap003 } from '../Assets/Template/TemplateMap'
import { useNavigate, useLocation } from 'react-router-dom'
import { project } from '../../../Common/Data'
import { useState } from 'react'
import { parseURLParams } from '../../../Common/Configure/Common'

import { useEventEmitter, useRequest } from 'ahooks'
import { Http } from '../../../Common/Api'
import { useEffect } from 'react'

const { hostname } = window.location
const { imageUrl } = project[hostname]

const Left = ({ LabelList, ActiveEvent }) => {
    const [Active, setActive] = useState(LabelList[0].uuid)
    useEffect(() => {
        ActiveEvent.emit(Active)
    }, [Active, ActiveEvent])

    return (
        <HomeLeft>
            <div className="Left">
                <div className="HomeTitle">工建智慧建造平台介绍</div>
                <div>
                    {LabelList.map(({ uuid, label }) => (
                        <div
                            key={uuid}
                            className={uuid === Active ? 'active' : ''}
                            onClick={() => {
                                if (Active !== uuid) setActive(uuid)
                            }}
                        >
                            {label}
                        </div>
                    ))}
                </div>
            </div>
        </HomeLeft>
    )
}

const Right = ({ data, Label, ActiveEvent }) => {
    const [Active, setActive] = useState()
    ActiveEvent.useSubscription(val => setActive(val))
    const Navigate = useNavigate()
    const NavTo = () => Navigate(`/Front/Page/OneOne?uuid=${Active}`)
    const OtherRightOne = [
        {
            uuid: 1,
            color: 'rgba(29, 229, 231, 1)',
            background: 'rgba(51, 114, 255, 0.2)',
            label: '收入',
            value: 'c110',
            unit: '万元',
        },
        {
            uuid: 2,
            color: 'rgba(249, 251, 95, 1)',
            background: 'rgba(51, 175, 255, 0.2)',
            label: '成本',
            value: 'c300',
            unit: '万元',
        },
        {
            uuid: 3,
            color: 'rgba(29, 229, 231, 1)',
            background: 'rgba(29, 229, 231, 0.2)',
            label: '利润',
            value: 'c390',
            unit: '万元',
        },
        {
            uuid: 4,
            color: 'rgba(249, 251, 95, 1)',
            background: 'rgba(30, 231, 101, 0.2)',
            label: '考核指标 ',
            value: 'c410',
            unit: '万元',
        },
    ]
    return (
        <HomeRight>
            <div className="Right">
                <img src={imageUrl + 'intelligence.gif'} alt="" />
                <div>{Label}</div>
                <div>
                    {OtherRightOne.map(({ uuid, color, background, label, value, unit }) => (
                        <div key={uuid} style={{ background }}>
                            <div style={{ background: color }} />
                            <div>{label}</div>
                            <div>
                                {data ? data[value] : 0} {unit}
                            </div>
                        </div>
                    ))}
                </div>
                <div>
                    <div onClick={NavTo}>进入公司</div>
                </div>
            </div>
        </HomeRight>
    )
}

export const Province = () => {
    const [ProjectList, setProjectList] = useState()
    const [MapList, setMapList] = useState()
    const [RightData, setRightData] = useState()
    const [TopData, setTopData] = useState()
    const [Label, setLabel] = useState()
    const { search } = useLocation()
    const [Search, setSearch] = useState()
    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        setLabel(ProjectList.find(v => v.uuid === val).label)
        getMap({ url: 'getJTGJProjectList', data: { pageIndex: 1, pageSize: 10000, organizationUuid: val } }).then(
            res => {
                const data = res.list.map(({ uuid, tableName, lat, lng }) => ({
                    uuid,
                    label: tableName,
                    position: [lng, lat, 0],
                    PileLable: 'PileFoundation001',
                    divClass: 'TemplateMapDiv003',
                }))
                setMapList(data)
            },
        )
        getCost({ url: 'getProgressGetCompanyCost', data: { organizationUuid: val } }).then(res => {
            const [data] = res.list
            setRightData(data)
        })
        getCount({ url: 'getJTGJPersonCount', data: { organizationUuid: val } }).then(res => {
            setTopData(res)
        })
    })

    const { runAsync: getList } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ uuid, fullName }) => ({ uuid, label: fullName }))
            setProjectList(data)
        },
    })
    const { runAsync: getMap } = useRequest(Http, { manual: true })
    const { runAsync: getCost } = useRequest(Http, { manual: true })
    const { runAsync: getCount } = useRequest(Http, { manual: true })
    useEffect(() => {
        const { uuid } = parseURLParams(search)
        setSearch(uuid)
        getList({ url: 'getJTGJCompanyList', data: { uuid } })
    }, [getList, search])

    return (
        <div className="Other">
            {Search && <TemplateMap003 AllProvince={AllProvince} mapId={Search} LabelList={MapList} />}
            <HomeTop data={TopData} type={2} />
            {ProjectList && <Left ActiveEvent={ActiveEvent} LabelList={ProjectList} />}
            <Right data={RightData} Label={Label} ActiveEvent={ActiveEvent} />
        </div>
    )
}
